<template>
  <div class="w-full h-full box-border bg-[#fff] flex justify-between items-center border-top">
    <div class="flex-[1] w-0 ml-[15px]">
      <el-input
        v-model="content"
        type="textarea"
        :rows="3"
        placeholder="输入消息"
        @keydown="handleKeydown"
      />
    </div>
    <div class="flex mx-[15px]">
      <el-button type="primary" class="!px-[20px]" round @click="handleSend"> 发送 </el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { debounce } from "lodash-es";
import { message } from "@/utils/message";

const content = ref("");
const emit = defineEmits(["send"]);

const handleSend = debounce(() => {
  if (!content.value) {
    message.warning("请输入消息");
    return;
  }
  emit("send", content.value);
  content.value = "";
}, 0);

// 处理回车事件
const handleKeydown = (event: KeyboardEvent) => {
  // 判断是 Ctrl + Enter (Windows/Linux) 或 Cmd + Enter (Mac)
  if ((event.key === "Enter" && event.ctrlKey) || (event.key === "Enter" && event.metaKey)) {
    // 当按下 Ctrl + Enter 或 Cmd + Enter 时，插入换行符
    content.value += "\n"; // 在 textarea 中添加换行
    event.preventDefault(); // 阻止默认行为（不提交表单）
  } else if (event.key === "Enter") {
    // 仅按下 Enter 键时，不进行换行
    event.preventDefault(); // 阻止 Enter 默认的换行行为
    handleSend();
  }
};
</script>
<style lang="scss" scoped>
.el-textarea {
  --el-input-bg-color: #f9f9f9;
}
.el-button {
  padding: 13px 20px;
}
</style>
